<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输小区名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            node-key="id"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :default-checked-keys="['101']"
            ref="tree"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-row>
            <el-col :span="14" :xs="24">
              <el-form-item label="账单生成日" prop="generated">
                <span>每月</span>
                <el-select v-model="form.generated" clearable placeholder="请选择">
                  <el-option v-for="item in day" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <span>日</span>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="缴费提醒" prop="pay">
                <span>账单后</span>
                <el-select v-model="form.pay" clearable placeholder="请选择">
                  <el-option v-for="item in day2" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <span>日</span>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="缴费截止日期" prop="deadline">
                <span>账单生成后</span>
                <el-select v-model="form.deadline" clearable placeholder="请选择">
                  <el-option v-for="item in day2" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <span>日</span>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="催缴提醒" prop="reminder">
                <span>逾期后</span>
                <el-select v-model="form.reminder" clearable placeholder="请选择">
                  <el-option v-for="item in day2" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <span>日</span>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="短信提醒">
                <el-checkbox v-model="form.checked"></el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="pay-type-box">
              <div class="pay-content">
                <div class="header">
                  <div class="header-box">
                    <div>缴费金额</div>
                    <div>
                      <el-button icon="el-icon-plus" size="mini" type="success" v-on:click="addNode()">新增</el-button>
                    </div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="headers">
                    <div class="header-type">类型</div>
                    <div class="header-type">扣费类型</div>
                    <div class="header-money">扣费金额</div>
                  </div>
                  <div class="list" v-for="(v,i) in form.list" :key="i">
                    <el-col :span="4">
                      <el-form-item :prop="`list.${i}.type`" :rules="productGroupRules.type">
                        <el-select v-model="v.type" @change="select" placeholder="请选择">
                          <el-option
                            v-for="item in type"
                            :key="item.id"
                            :label="item.typename"
                            :value="item.id"
                            :disabled="item.disabled"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item
                        :prop="`list.${i}.deductionType`"
                        :rules="productGroupRules.deductionType"
                      >
                        <el-select v-model="v.deductionType" clearable placeholder="请选择">
                          <el-option
                            v-for="item in type2"
                            :key="item.id"
                            :label="item.typename"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="16">
                      <el-form-item :prop="`list.${i}.money`" :rules="productGroupRules.money">
                        <el-input placeholder="请输入金额" v-model="v.money" clearable></el-input>
                        <el-button v-on:click="deleteNode(i)" type="danger" icon="el-icon-delete" circle></el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus
} from "@/api/system/user";
import { treeselect } from "@/api/system/dept";
import { listPost } from "@/api/system/post";
import { listRole } from "@/api/system/role";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [],
      // 性别状态字典
      sexOptions: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      //表单
      form: {
        list: [
          {
            type: "",
            deductionType: "",
            money: "",
            disabled:''
          }
        ]
      },
      day: [],
      day2: [],
      rules: {
        generated: [
          { required: true, message: "账单生成日不能为空", trigger: "change" }
        ],
        pay: [
          { required: true, message: "缴费提醒不能为空", trigger: "change" }
        ],
        deadline: [
          { required: true, message: "缴费截止日不能为空", trigger: "change" }
        ],
        reminder: [
          { required: true, message: "催缴提醒不能为空", trigger: "change" }
        ]
      },
      //循环表单验证
      productGroupRules: {
        type: [{ required: true, message: "类型不能为空", trigger: "change" }],
        deductionType: [
          { required: true, message: "扣费类型不能为空", trigger: "change" }
        ],
        money: [
          { required: true, message: "扣费金额不能为空", trigger: "blur" }
        ]
      },
      type: [
        {
          id: 0,
          typename: "物业管理费",
          disabled:false
        },
        {
          id: 4,
          typename: "服务费",
          disabled:false
        },
        {
          id: 3,
          typename: "清洁费",
          disabled:false
        },
        {
          id: 1,
          typename: "水费",
          disabled:false
        },
        {
          id: 2,
          typename: "电费",
          disabled:false
        }
      ],
      type2: [
        {
          id: 1,
          typename: "一口价"
        },
        {
          id: 2,
          typename: "按平方数"
        }
      ],
      //缴费类型数组
      //缴费之后是否禁用选中的项
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getTreeselect();
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_user_sex").then(response => {
      this.sexOptions = response.data;
    });
    this.getConfigKey("sys.user.initPassword").then(response => {
      this.initPassword = response.data;
    });
    this.getDay();
    this.getDay2();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
      //    this.$refs.vuetree.setCurrentKey(this.parentId);
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getList();
    },
    /** 查询岗位列表 */
    getPosts() {
      listPost().then(response => {
        this.postOptions = response.rows;
      });
    },
    /** 查询角色列表 */
    getRoles() {
      listRole().then(response => {
        this.roleOptions = response.rows;
      });
    },
    //确认更改
    onSubmit() {
      console.log(this.form);
      this.msgSuccess("设置成功");
    },
    //续费确认
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form);
          var list = this.form.list;
          for (let i = 0; i < list.length; i++) {
            if (list[i]) {
              this.msgSuccess("重复了");
              break;
            }
          }
        } else {
          return false;
        }
      });
    },
    //取消
    cancel() {
      this.form = {
        generated: "",
        pay: "",
        deadline: "",
        reminder: "",
        list: [
          {
            type: "",
            deductionType: "",
            money: ""
          }
        ]
      };
      this.resetForm("form");
    },
    //选中是否重复判断
    select(val) {
      const list =this.type;
      const listType = this.form.list
      // var type1 = list.find(({ type }) => "1" == type);
      // for (let i = 0; i < list.length; i++) {
      //   if(val === list[i].id){
      //     this.type[i].disabled = true
      //   }else{
      //      this.type[i].disabled = false
      //   }
      // }
      console.log(list)
      console.log(listType)
    },
    //添加标本div
    addNode: function() {
      
      if(this.form.list.length==5){
          this.$message({
            type:'warning',
            showClose:true,
            message:'新增已达到上限'
          })
      }else{
        this.form.list.push({
        type: "",
        deductionType: "",
        money: ""
      });
      }
    },
    //删除样本div
    deleteNode: function(i) {
      this.form.list.splice(i, 1); //删除index为i,位置的数组元素
      this.select()
    },
    //天数
    getDay() {
      for (let i = 1; i < 29; i++) {
        this.day.push(i);
      }
    },
    getDay2() {
      for (let i = 1; i < 31; i++) {
        this.day2.push(i);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
$bd-color:#F5F5F5;
$fz:14px;
/deep/ .sub-btn {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
.pay-type-box {
  border: 1px solid $bd-color;
  .pay-content {
    width: 100%;
    .header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 20px 0;
      background-color: $bd-color;
      .header-box{
        font-size: $fz;
        width: 95%;
        margin: auto;
        height: 36px;
         display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .content-box {
      width: 95%;
      margin: auto;
      padding: 0;
      .headers {
        font-size: $fz;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .header-type{
          width: 17%;
        }
      }
      /deep/
      .el-form-item__content {
        display: flex;
        margin-left: 0 !important;
        margin-right: 20px;
        .el-button{
          margin-left: 20px;
        }
      }
    }
  }
}
.dialog-footer {
  margin-top: 30px;
}
</style>